import { Fragment,useState } from 'react'
import { useNavigate } from 'react-router-dom'
import loginStyle from '../../pattern/login/index.module.css'
import '../../pattern/login/index.module.css'
import React from 'react';
import { Button, Checkbox, Form, Input, Spin } from 'antd';
import * as api from '@/api/login'
import { resolve } from 'path';
import '../../pattern/login/style.css'
const Login = () => {
    let [loading,setLoading] = useState<boolean>(false)
    // let onValuesChange = 
    let verifyuserName = (rule: any, value: string) => {
        let reg = /^[a-zA-Z0-9_-]{3,16}$/
        if (!value) {
            return Promise.reject('请输入用户名')
        }
        if (reg.test(value)) {
            return Promise.resolve()
        } else {
            return Promise.reject('请输入3到16位,,字符的用户名')
        }
    }
    let verifypassword = (rule: any, value: string) => {
        let reg = /^[a-zA-Z0-9_-]{3,16}$/
        if (!value) {
            return Promise.reject('请输入密码')
        }
        if (reg.test(value)) {
            return Promise.resolve()
        } else {
            return Promise.reject('请输入3到16位,字符的密码')
        }
    }
    let navigate = useNavigate()
    const onFinish = async (values: any) => {
        setLoading(true)
        try {
            console.log(values.username);
            let res = await api.userNames(values.username, values.password)
            // let res =await api.aaa({username:values.username,password:values.password})
            // console.log(res);
            if (res.data.state) {
                navigate('/')
                setLoading(false)
                sessionStorage.setItem('qf-token', res.data.token)
            } else {
                alert(res.data.msg)
            }
        } catch (e) {
            console.log(e);
        }
    };
    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };
    return (
        <div className={loginStyle.bigbox}>
            <Spin spinning={loading} className={loginStyle.spinStyle} >
                <Form
                    className={loginStyle.box}
                    name="basic"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 30 }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"

                >
                    <Form.Item
                        label="用户名"
                        name="username"
                        rules={[{ required: true, validator: verifyuserName }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="密码"
                        name="password"

                        rules={[{ required: true, validator: verifypassword }]}
                    >
                        <Input.Password />
                    </Form.Item>

                    <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 8, span: 16 }}>
                        <Checkbox>七天免登录</Checkbox>
                    </Form.Item>

                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="submit">
                            登入
                        </Button>
                    </Form.Item>
                </Form>
            </Spin>
        </div>

    )
}

export default Login